<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		* {
			padding: 0;
			margin: 0;
		}

		body {
			padding: 0;
			margin: 0;
			background-color: #222;
		}

		.btn {
			display: block;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			text-transform: uppercase;
			width: 200px;
			height: 40px;
			text-decoration: none;
			color: #fff;
			text-align: center;
			line-height: 40px;
			border: 1px solid #8b0b16;
			-moz-box-shadow: 30px 0 #8b0b16 inset,-30px 0 #8b0b16 inset;;
			/*通过正负值调整变化方向*/
			box-shadow: 30px 0 #8b0b16 inset,-30px 0 #8b0b16 inset;
			transition: all 1s;
			user-select: none;
		}

		.btn:hover {
			box-shadow: 0 0 #8b0b16 inset;
			color: #8b0b16;
			-webkit-transition: all 0.5s;
			-moz-transition: all 0.5s;
			-o-transition: all 0.5s;
			transition: all 0.5s;
		}
	</style>
	<body>
		<div><a class="btn">Hover me</a></div>
	</body>
</html>
